<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Thứ tự danh mục/bài viết</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{orderListBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!orderListBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <h:form id="mainForm">
            <p:panel header="Thứ tự danh mục/bài viết">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Cập nhật" actionListener="#{orderListBean.saveAction()}" update="mainForm"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content"
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Danh mục" />
                    <p:selectOneMenu value="#{orderListBean.category}" effect="fade" converter="categoryConverter">  
                        <f:selectItem itemLabel="" itemValue="#{null}"/>
                        <f:selectItems value="#{orderListBean.parentCategories}" var="category" itemLabel="#{category.name}" itemValue="#{category}"/>
                        <p:ajax update="mainForm" listener="#{orderListBean.handleCategoryChangeAction}" />
                    </p:selectOneMenu>
                </h:panelGrid>
                
                <p:fieldset style="margin-bottom: 5px;" legend="Thứ tự danh mục con" toggleable="true" toggleSpeed="500" collapsed="true"
                            rendered="#{orderListBean.orderedCategories.size() > 0}">
                    <p:orderList id="categoryList" value="#{orderListBean.orderedCategories}" var="category" effect="clip" itemValue="#{category}" 
                                 converter="categoryConverter" controlsLocation="left">
                        <f:facet name="caption">Thứ tự danh mục con</f:facet>
                        <p:column>
                            #{category.name}
                        </p:column>
                    </p:orderList>
                </p:fieldset>

                <p:fieldset legend="Thứ tự bài viết" toggleable="true" toggleSpeed="500" collapsed="true"
                            rendered="#{orderListBean.orderedItems.size() > 0}">
                    <p:orderList id="itemList" value="#{orderListBean.orderedItems}" var="item" effect="clip" itemValue="#{item}" 
                                 converter="itemConverter" controlsLocation="left">
                        <f:facet name="caption">Thứ tự bài viết</f:facet>
                        <p:column style="width:25%">
                            <p:graphicImage value="#{item.thumbnailURL}" width="30" rendered="#{item.thumbnailURL.length() > 0}"/>
                        </p:column>
                        <p:column style="width:75%">
                            #{item.name}
                        </p:column>
                    </p:orderList>
                </p:fieldset>
                
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Cập nhật" actionListener="#{orderListBean.saveAction()}" update="mainForm"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>